<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>Home</title>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-row :gutter="24">
                <el-col :span="4"><el-image src="https://z1.muscache.cn/pictures/f78e9e8a-236f-4b4d-bac3-71a56e1e4deb.jpg"></el-image></el-col>
                <el-col :span="4" :offset="16">
                    <div class="block">
                        <el-dropdown th:if="*{user_logged_in}" @command="handleCommand">
                            <el-button type="primary" th:text="*{user.username}" icon="el-icon-arrow-down el-icon--right"></el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="toCenter">Center</el-dropdown-item>
                                <el-dropdown-item command="logout">Log out</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                     <el-input type="hidden" th:value="${user.username}" ref="username"></el-input>
                          <!-- <el-avatar th:if="*{user_logged_in}" shape="square" :size="50" th:text="*{user.username}"></el-avatar>-->
                        <el-button th:if="!*{user_logged_in}" type="text" @click="toLogin">Login</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-header>
        <el-main>
            <el-card style="padding-top: 10px; margin-top: 10px">
                <el-form :inline="true" :model="form" class="demo-form-inline" size="mini">
                    <el-form-item label="Location">
                        <el-input v-model.number="form.location" placeholder="country-market"></el-input>
                    </el-form-item>
                    <el-form-item label="Accommodates">
                        <el-input-number v-model="form.accommodated" :min="0" :step-strictly="true" :max="50" :controls="false"></el-input-number>
                    </el-form-item>
                    <el-form-item label="Bedrooms">
                        <el-input-number v-model="form.bedrooms" :min="0" :step-strictly="true" :max="50" :controls="false"></el-input-number>
                    </el-form-item>
                    <el-form-item label="Beds">
                        <el-input-number v-model="form.beds" :min="0" :step-strictly="true" :max="50" :controls="false"></el-input-number>
                    </el-form-item>
                    <el-form-item label="Price">
                        <el-input-number v-model="form.price" :min="0" :step-strictly="true" :controls="false"></el-input-number>
                    </el-form-item>
                    <el-form-item label="Property">
                        <el-select v-model="form.property" >
                            <el-option
                                    v-for="item in propertys"
                                    :key="item"
                                    :label="item"
                                    :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="Amenities">
                        <el-select v-model="form.amenities" >
                            <el-option
                                    v-for="item in amenities"
                                    :key="item"
                                    :label="item"
                                    :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="Rating">
                        <el-input-number v-model="form.rating" :min="0" :step-strictly="true" :max="100" :controls="false"></el-input-number>
                    </el-form-item>
                    <el-form-item label="Host status">
                        <el-select v-model="form.status" >
                            <el-option label="super hosts" value="true"></el-option>
                            <el-option label="regular hosts" value="false"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="Summary">
                        <el-input v-model.number="form.summary"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="searchForm(1)" icon="el-icon-search"></el-button>
                    </el-form-item>
                </el-form>
            </el-card>
            <el-card body-style="{padding: '0'}" v-for="(item, index) in dataList" :key="index" shadow="hover" style="padding-top: 10px; margin-top: 10px" >
                <div @click="showHost(item._id)">
                    <el-row :gutter="24">
                        <el-col :span="8" style="padding: 0">
                            <el-image
                                    class="image"
                                    fit="scale-down"
                                    style="width: 50%; height: 10%"
                                    :src="item.images.picture_url">
                                <div slot="placeholder" class="image-slot">
                                    加载中<span class="dot">...</span>
                                </div>
                            </el-image>
                        </el-col>
                        <el-col :span="16">
                            <div style="text-align: left">
                                <span style="color: #303133; font-size: 40px;">{{item.name}}</span><br/>
                                <span style="color: #909399; font-size: 30px;">Bedrooms: </span> <span style="color: #303133; font-size: 40px;">{{item.bedrooms}}</span><br/>
                                <span style="color: #909399; font-size: 30px;">Beds: </span><span style="color: #303133; font-size: 40px;">{{item.beds}}</span><br/>
                                <span style="color: #909399; font-size: 30px;">Price: </span><span style="color: #303133; font-size: 40px;">{{item.price.low / 100}}.00</span>/ night
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-card>
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="form.pageNum"
                    :page-size="10"
                    layout="total, prev, pager, next"
                    :total="total">
            </el-pagination>
        </el-main>
    </el-container>
    <el-dialog title="Login" :visible.sync="dialogFormVisible" width="30%">
        <el-form :model="user" ref="loginFrom" :rules="rules">
            <el-form-item label="Username" prop="username">
                <el-input v-model="user.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="Password" prop="password">
                <el-input v-model="user.password" type="password" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">cancel</el-button>
            <el-button type="primary" @click="login">login</el-button>
        </div>
    </el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/element-ui/lib/umd/locale/en.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    ELEMENT.locale(ELEMENT.lang.en)
</script>
<script>
    new Vue({
        el: '#app',
        data: () => {
            return {
                user: {
                    username: '',
                    password: ''
                },
                dialogFormVisible: false,
                form: {
                    location: '',
                    bedrooms: '',
                    beds: '',
                    property: '',
                    accommodated: '',
                    amenities: '',
                    price: '',
                    rating: '',
                    status: '',
                    summary: '',
                    pageNum: 1
                },
                amenities: ["TV", "Cable TV", "Wifi", "Kitchen", "Paid parking off premises", "Smoking allowed", "Pets allowed", "Buzzer/wireless intercom", "Heating", "Family/kid friendly", "Washer", "First aid kit", "Fire extinguisher", "Essentials", "Hangers", "Hair dryer", "Iron", "Pack ’n Play/travel crib", "Room-darkening shades", "Hot water", "Bed linens", "Extra pillows and blankets", "Microwave", "Coffee maker", "Refrigerator", "Dishwasher", "Dishes and silverware", "Cooking basics", "Oven", "Stove", "Cleaning before checkout", "Waterfront"],
                propertys: [
                  'Apartment',
                  'Loft',
                  'Guesthouse',
                ],
                total: 0,
                rules: {
                    username: [
                        { required: true, message: 'Please enter the username', trigger: 'change' }
                    ],
                    password: [
                        { required: true, message: 'Please enter the password', trigger: 'change' }
                    ]
                },
                dataList: []
            }
        },
        mounted() {
            this.searchForm(1)
        },
        methods: {
            handleCommand(command) {
                location.href = `/${command}`
            },
            toLogin() {
                this.user = {
                    username: '',
                    password: ''
                }
                this.dialogFormVisible = true
            },
            login(){
                this.$refs['loginFrom'].validate(valid => {
                    if (valid) {
                        $.ajax({
                            url: '/login'
                            ,type: 'post'
                            ,data: this.user
                            ,dataType: 'json'
                            ,success: (data) => {
                                if (data.code === 0){
                                    this.$message.success(data.message)
                                    setTimeout(()=> {
                                        location.reload()
                                    }, 2000)
                                }
                            }
                        })
                    }
                })
            },
            searchForm(val) {
                this.form.pageNum = val
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                $.ajax({
                    url: '/getHost'
                    ,type: 'post'
                    ,data: this.form
                    ,dataType: 'json'
                    ,success: (data) => {
                        if (data.code === 0){
                           this.total = data.data.total
                            this.dataList = data.data.data
                        }
                        loading.close();
                    },
                    error: () =>{
                        loading.close();
                    }
                })
            },
            showHost(id) {
                let username = this.$refs.username.value
                if ('consumer' === username) {
                    this.toLogin()
                } else {
                    location.href = `/toHost/${id}`
                }
            },
            handleCurrentChange(val) {
                this.searchForm(val)
            }
        }
    })
</script>
<style>
    .image {
        width: 100%;
        display: block;
    }
    .el-header{
        color: #333;
        text-align: center;
        height: 10vh;
        padding: 0;
    }

    .el-main {
        color: #333;
        text-align: center;
        height: 90vh;
        padding: 0;
    }
</style>

</html>
